// src/pages/personal/styles/styles.module.less
@import "@styles/color.less";
@import "@styles/hairline.less";

// 个人资料页面样式
.page {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: @bgColor;
    position: relative;

    .options {
        background: #fff;
        padding: 0 4.5333vw;
        position: relative;
        .hairline("top", @borderColor);
        margin-bottom: 3.2vw;

        li {
            position: relative;
            padding: 4vw 0;
            .hairline("top", @borderColor);

            >span {
                padding-right: 4vw;
                white-space: nowrap;
            }

            &:first-child {
                .hairline("top", transparent);
            }

            font-size: 3.7333vw;
            color: #3a3948;
            display: flex;
            justify-content: space-between;

            .value {
                display: flex;
                align-items: center;

                .avatar {
                    width: 6.4vw;
                    height: 6.4vw;
                    overflow: hidden;
                    border-radius: 50%;

                    img {
                        object-fit: cover;
                    }
                }

                .icon {
                    margin-left: 3.4667vw;
                    color: #969799;
                    fill: currentColor;
                    width: 3.7333vw;
                    height: 3.7333vw;
                }
            }
        }
    }

    .logout {
        width: 91.4667vw;
        height: 11.7333vw;
        display: block;
        background-color: @mainColor;
        color: #fff;
        font-size: 4.2667vw;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 9vw;
        border-radius: 1.3333vw;
    }
}

// 头像修改、性别修改样式
.list {
    width: 100%;
    overflow: hidden;

    li {
        height: 13.3333vw;
        line-height: 13.3333vw;
        text-align: center;
        font-size: 4.2667vw;

        &:last-child {
            position: relative;
            margin-top: 2.1333vw;
            height: 14.5vw;
            line-height: 14.5vw;
            color: #a5a6ab;

            &::before {
                content: "";
                height: 2.1333vw;
                width: 100%;
                position: absolute;
                left: 0;
                top: -2.1333vw;
                background: #f7f8fa;
            }
        }
    }
}

// 昵称修改、简介修改样式
.content {
    .icon {
        width: 4.5333vw;
        height: 4.5333vw;
    }

    .submit {
        color: @mainColor;
    }

    form {
        padding: 4vw 4.27vw 0 4.27vw;
        position: relative;
        .hairline("top", @borderColor);
        overflow: hidden;

        .bg {
            background: @bgColor;
        }

        .textarea {
            padding: 2.8vw;
            font-size: 3.73vw;
            width: 100%;
            color: #333;
            border-radius: 1.87vw;
            resize: none;
        }

        .count {
            text-align: right;
            padding: 2vw;
        }

        .input {
            background: @bgColor;
            padding: 2.8vw;
            font-size: 3.73vw;
            width: 100%;
            color: #333;
            margin-top: 4vw;
            border-radius: 1.87vw;
        }
    }
}